<template>
  <div class="common-layout">
    <el-container>
      <el-container>
        <el-aside width="200px">

          <!-- 快速统计 -->
          <div class="quick-stats">
            <div class="stat-card" v-for="(stat, index) in stats" :key="index">
              <div class="stat-header">
                <span class="stat-title">{{ stat.title }}</span>
                <el-icon :color="stat.color"><component :is="stat.icon" /></el-icon>
              </div>
              <div class="stat-value">{{ stat.value }}</div>
              <div class="stat-trend" :style="{ color: stat.trendColor }">
                <el-icon><Top v-if="stat.trend > 0" /><Bottom v-else /></el-icon>
                {{ stat.trend > 0 ? '+' : '' }}{{ stat.trend }}% {{ stat.trendText }}
              </div>
            </div>
          </div>

          <!-- 系统信息 -->
          <div class="system-card">
            <div class="card-header">
              <h2>系统信息</h2>
              <el-tag type="success">运行中</el-tag>
            </div>

            <div class="system-info">
              <div class="info-item" v-for="(info, index) in systemInfo" :key="index">
                <span class="info-label">{{ info.label }}</span>
                <span class="info-value">{{ info.value }}</span>
              </div>
            </div>
          </div>
        </el-aside>
        <el-main>
          主内容区域
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="date" label="Date" width="180" />
              <el-table-column prop="name" label="Name" width="180" />
              <el-table-column prop="address" label="Address" />
            </el-table>
          <el-pagination background layout="prev, pager, next" :total="1000" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<!--<template>-->
<!--  <div class="content-area">-->

<!--    &lt;!&ndash; 固定侧边栏 &ndash;&gt;-->
<!--    <div class="sidebar">-->


<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<script setup lang="ts">

const stats= [
  { title: '今日访问', value: '1,245', trend: 12.5, trendText: '较昨日', color: '#409eff', icon: 'User' },
  { title: '订单数量', value: '356', trend: 8.2, trendText: '较上周', color: '#67c23a', icon: 'ShoppingCart' },
  { title: '系统负载', value: '24%', trend: -3.1, trendText: '较昨日', color: '#e6a23c', icon: 'Cpu' }
]
const systemInfo= [
  { label: '系统版本', value: 'VueElectron v1.5.2' },
  { label: '最后更新', value: '2023-06-15 14:30' },
  { label: '运行时间', value: '15天 8小时' },
  { label: '数据库状态', value: '正常' }
]

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style scoped>
.content-area {
  display: flex;
  padding: 20px;
  gap: 20px;
  max-width: 1600px;
  margin: 0 auto;
}

.sidebar {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 路由过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

/* 卡片样式 */
.quick-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.stat-title {
  font-size: 14px;
  color: #606266;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  margin: 8px 0;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.system-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.system-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-label {
  font-size: 14px;
  color: #606266;
}

.info-value {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}
</style>